Bootstrap 3 - Нестандартное навигационное меню
На этом уроке мы познакомимся с расширением Jasny Bootstrap, которое будем использовать для создания нестандартного навигационного меню.
Назначение расширения Jansy Bootstrap
Jansy Bootstrap – это расширение для платформы Twitter Bootstrap 3, которое предлагает веб-разработчикам дополнительные компоненты и плагины:
- Кнопки с метками;
- Вертикальное навигационное меню;
- Навигационное меню, которое прикреплено к левой или правой части экрана;
- Скрывающееся навигационное меню (используя плагин offcanvas);
- Предупреждения (alerts), прикреплённые к нижней или верхней части экрана;
- Плагин "rowlink.js", который превращает строку таблицы в ссылку;
- Плагин "inputmask.js", который предназначен для добавления определенной маски к некоторому полю;
- Плагин "fileinput.js", предназначенный для создания визуального привлекательных виджетов для отображения выбранных файлов или изображений.
Подключение расширения Jansy Bootstrap
Для подключения к веб-странице расширения Jansy Bootstrap у Вас должны быть предварительно загружены архивы Twitter Bootstrap 3, jQuery и, конечно же, Jansy Bootstrap. После распаковки данных архивов, их необходимо подключить к веб-странице.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Jasny Bootstrap</title> <!--Подключаем CSS Twitter Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!--Подключаем CSS Jasny Bootstrap --> <link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Привет, Jasny Bootstrap!</h1> <!-- Подключаем jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Подключаем JavaScript Twitter Bootstrap --> <script src="js/bootstrap.min.js"></script> <!-- Подключаем JavaScript Jasny Bootstrap --> <script src="js/jasny-bootstrap.min.js"></script> </body> </html>
Вертикальное навигационное меню
Создать вертикальное навигационное меню в Twitter Bootstrap 3 можно с помощью компонента navmenu. По умолчанию данное меню имеет ширину, равную 300px. Изменить ширину данного меню можно посредством установления необходимой ширины для .navmenu
в вашем CSS или с помощью настройки переменной @navmenu-width
во время создания пользовательской сборки.
Код HTML
<nav class="navmenu navmenu-default" role="navigation"> <a class="navmenu-brand" href="#">Название</a> <ul class="nav navmenu-nav"> <li class="active"><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Пункт 3 <b class="caret"></b></a> <ul class="dropdown-menu navmenu-nav" role="menu"> <li><a href="#">Пункт 3.1</a></li> <li><a href="#">Пункт 3.2</a></li> <li><a href="#">Пункт 3.3</a></li> <li><a href="#">Пункт 3.4</a></li> </ul> </li> </ul> </nav>
Код CSS
.navmenu { width: 200px; }
Меню
Меню, прикреплённое к левой или правой части экрана
Для создания навигационного меню, прикреплённого к левой (.navmenu-fixed-left
) или правой (.navmenu-fixed-right
) границе экрана, необходимо добавить один из выше представленных классов к элементу nav. При этом необходимо помнить, что меню может наложиться на другое содержимое веб-страницы, которое тоже расположено в этой части экрана. Чтобы этого не допустить, необходимо установить дополнительные отступы padding слева или справа (в зависимости от расположения меню) для тега body. Величина отступа должна быть больше или равной ширине навигационного меню. Также необходимо помнить, что Ваш файл CSS, необходимо подключить после подключения CSS файла Jansy Bootstrap.
Код HTML
<nav class="navmenu navmenu-default navmenu-fixed-left" role="navigation"> ... </nav>
Код CSS
body { padding-left: 300px; }
Скрывающееся навигационное меню
Скрывающееся навигационное меню работает на основе плагина offcanvas, который позволяет скрыть navmenu с холста. Это особенно полезно для экранов с небольшим размером диагонали.
Рассмотрим следующие примеры navmenu с плагином offcanvas:
- Навигационное меню с эффектом толкания (push). Принцип работы данного меню заключается в толкании всей веб-страницы (
<body>...</body>
) на величину, равную ширине данного меню. При этом навигационное меню размещается в освободившейся области веб-страницы.Код HTML:
<nav class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation"> <a class="navmenu-brand" href="#">Project name</a> <ul class="nav navmenu-nav"> ... </ul> </nav> <div class="navbar navbar-default navbar-fixed-top"> <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="container"> <!-- Содержимое веб-страницы--> </div>
Код CSS:
html, body { height: 100%; } body { padding: 50px 0 0 0; } .navbar-toggle { float: left; margin-left: 15px; } @media (min-width: 0) { .navbar-toggle { display: block; } } @media (min-width: 992px) { body { padding: 0; } .navbar { right: auto; background: none; border: none; } }
- Навигационное меню, которое изменяет своё расположение в зависимости от ширины рабочей области окна браузера.
Код HTML:
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm"> <a class="navmenu-brand visible-md visible-lg" href="#">Название сайта</a> <ul class="nav navmenu-nav"> ... </ul> </div> <div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg"> <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="container"> <!-- Основное содержимое веб-страницы --> </div>
Код CSS:
html, body { height: 100%; } body { padding: 50px 0 0 0; } .navmenu { padding-top: 50px; } .navbar { display: block; text-align: center; } .navbar-brand { display: inline-block; float: none; } .navbar-toggle { position: absolute; float: left; margin-left: 15px; } .container { max-width: 100%; } @media (min-width: 1px) { .navbar-toggle { display: block !important; } } @media (min-width: 992px) { body { padding: 0 0 0 300px; } .navmenu { padding-top: 0; } .navbar { display: none !important; /* для IE8 */ } }
- Навигационное меню с эффектом смещения (reveal). Принцип работы данного меню заключается в смещении блока div с классом canvas (
<div class="canvas">...</div>
). Данный блок играет роль контейнера, в котором необходимо поместить всё содержимое страницы кроме данного меню. Во время вызова навигационного меню данный блок div смещается влево или вправо на величину, равную ширине этого меню. В освободившейся области экрана будет располагается navmenu (навигационное меню). Также можно отметить, что данный метод является противоположным методу push.Код HTML:
<div class="navmenu navmenu-default navmenu-fixed-left"> <a class="navmenu-brand" href="#">Название сайта</a> <ul class="nav navmenu-nav"> ... </ul> </div> <div class="canvas"> <div class="navbar navbar-default navbar-fixed-top"> <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="container"> <!-- Основное содержимое веб-страницы --> </div> </div>
Код CSS:
html, body { height: 100%; } .navbar-toggle { float: left; margin-left: 15px; } .navmenu { z-index: 1; } .canvas { position: relative; left: 0; z-index: 2; min-height: 100%; padding: 50px 0 0 0; background: #fff; } @media (min-width: 0) { .navbar-toggle { display: block; } } @media (min-width: 992px) { body { padding: 0; } .navbar { right: auto; background: none; border: none; } .canvas { padding: 0; } }
Пользуясь случаем, выражаю признательность за столь кропотливую и полезную работу! Материал изложен системно, чётко и доходчиво. Даже для неискушённого «строителя сайтов» (знаю лишь HTML и CSS).
Пара вопросов, правда, возникла:
1. Задача: На странице якорь, ссылка на который есть в меню. Как добиться, чтобы меню (и навбар) автоматически убиралось с экрана после скролла до этого якоря?
2. Как сделать, чтобы в адаптивной вёрстке после перехода по ссылке меню, убирался с экрана (вверх или влево/вправо) весь navbar (не только меню), заменяясь на hamburger (как это и происходит на десктопе)?
Заранее благодарен.
Сделал таблицу с ценами услуг, на странице цены, надо ее правильно доработать? Пробовал различные компоненты(pdoResources, pdoField, pdoMenu), знаний не хватает нужна помощь!
В админке, есть категория с двумя под категориями в них содержаться по три статьи с описаниям услуг.
Пока получилась вот такая таблица при помощи компонента pdoMenu, в принципе все устраивает вот только надо чтобы выбирать можно было не по под категориям, а по категории родителю (тоесть не по &parents=`20,24`, а по &parents=`19`) с тем же эффектом. Если будут создавать нового ребенка, пусть он на странице цены добавлялся автоматом.
Код самой выборки
Заранее большое спасибо!!!
Попробуйте сделать так:
alexin-portal.ru/home.php?mod=space&uid=1&do=profile
В качестве временного решения можете добавить на страницу этот скрипт после подключения библиотеки jQuery:
Пробовал сделать меню с эффектом reveal с выделенным цветом заголовком страницы, как у Вас на скриншоте. Но цвет не отрисовывается. На демо также этого цвета нет. Пробовал в разных браузерах.
getuikit.com/docs/introduction
И еще сам побывал реализовывать но только с двумя меню, но думаю в ситуации с modx это будет дополнительная загрузка меню, наверное будет тормозить.
Еще интересно сделано, в боковое меню сливается и верхнее и боковое.
Пока не придумал как сделать, с помощью этого компонента!
К примеру:
это меню для мобильных, оно и так загружается при загрузке страницы, только скрыто стилями и JS.
— основной контент
Получается что 2 меню одновременно загружаются!
Я пока правда не реализовывал в MODX, незнаю вообще будет так работать) два одинаковых сниппета в одном месте.)))
А вы не знаете, как решить проблему ScrollSpy в данной странице. Почему перезагружает страницу?
Тег base имеет следующий код:
Следовательно, ссылки, у вас будут ссылаться на главную страницу. Например, вышеприведённая будет указывать на:
А должна на текущую страницу (в вашем примере):
Для этого вам необходимо формировать полный адрес ссылки (а не только его хэш часть).
Но для того чтобы сохранить функциональность ScrollSpy (он не может работать с такими адресами) дополнительно использовать атрибут data-target.
Т.е. ссылки формировать для меню в таком варианте:
Никак не могу порешать одну задачу: необходимо, чтобы после уменьшения экрана до sm и меньше левый блок исчезал и появлялся по нажатию на левую кнопку слева, а правый исчезал на xs, а появлялся по нажатию на правую кнопку справа.
Сам пытаюсь реализовать — получается только как выпадающее сверху меню
Визуально как-то так
1. Основное содержимое страницы:
Назначение основных элементов HTML-кода:
wrapper — используется для скрытия элементов, расположенных за его областью
canvas — элемент, который будем двигать влево или вправо, и тем самым отображать левое или правое меню.
left — левое меню
right — правое меню
middle — блок, для помещения в него основного содержимого.
2. CSS-стили:
Для показа левого меню необходимо добавить к элементу с id=«wrapper» класс show-left. Для правого — соотвественно класс show-right.
3. Код JavaScript, который будет отображать при нажатию кнопку Left или Right соответствующий блок:
Но решения я не нашел…
Попробуйте в CSS добавить следующее правило:
Вместо 200px можете подобрать необходимое значение.
Тестировал на устройствах, плагином Chrome и банальным масштабированием окна.
Решилось переходом на версию 3.1.2 и изменением на visible:
в jasny-bootstrap.js
Огромное спасибо за уроки.
Вопрос по последнему примеру «Навигационное меню с эффектом смещения (reveal)»
Если у нас сверху есть шапка сайта на всю ширину. И эффектное меню, схлопывающееся на небольших экранах необходимо под ним воткнуть.
top = высота шапки, решает задачу НО при скролинге все меню отрывается от шапки на высоту top (
Подскажите пожалуйста как можно решить такую проблему?
Попробуйте сделать так. После шапки сайта добавить 2 блока. Содержимое страницы помещаете между ними:
А также изменить позиционирование следующих элементов на абсолютное.
CSS код:
Буду очень благодарен если кто-нибудь объяснит как сделать выдвижное меню прикрепленное к левой части экрана как на этом сайте (при нажатии кнопки Меню) — www.needforspeed.com/ru_RU/news
Пытался найти инфу в гугле ничего не нашел, но возможно я неправильно ставил вопрос
Вот один из примеров такого меню:
_http://mmenu.frebsite.nl/examples.html
Необходимо к этому меню прикрутить Google Maps API. Если задать height дива с картой в пикселях, то карта заданного размера отображается на странице, а если в процентах (например 100%), то она не отображается. Хотелось бы, чтобы карта была во все окно браузера. На чистой странице без меню карта отображается так, как нужно. Подскажите пожалуйста, как решить данную проблему.
Спасибо меню очень интересное.
Александр подскажите почему при нажатии на пункт подменю, на мобильных устройствах меню сворачивается и переход по ссылке не осуществляется? Второй день голову ломаю, не пойму в чём дело.
Вот пациент: _http://www.alexin-portal.ru/info.php?mod=list&subcat_id=26
Подробный поиск.
Начать делать можно так:
Но текст заезжает за пределы правой части экрана.
Не могу победить следующий момент.
Вертикальное меню, аккордеон раскрывающиеся при нажатии.
При нажатии на ссылку в суб меню, это меню сворачивается.
Как сделать, чтобы оно оставалось открытым после нажатия на ссылку и открытии следующей страницы, так как это сделано у вас в сайтбаре, зеленое меню аккордеон…
Спасибо.
Петр, когда Вы задаёте вопрос, формулируйте то, что Вы хотите сделать. В таком варианте задавать вопросы не совсем корректно (сделать как у другого). Потому что непонятно, что хотите получить именно Вы?
Для запоминая вкладки, использую LocalStorage.
Извините, что не корректно задаю вопросы, не образован еще в общей терминологии сайтостроения.
Могли бы вы подсказать на каком движке собран ваш сайт? Я создал шаблон на бустрап, но ни как не могу найти подходящую CMS, что посоветуете?
Спасибо.
Как сделать что б вертикальное меню сдвигала основную часть контекста, но при этом что б справа не заезжало за экран. (т е середина сужалась0?
То можно это сделать так:
А на кнопку повесить событие, которое будет переключать видимость меню:
Не совсем понятен вопрос, расскажите подробнее, что и где необходимо сделать?
на
Это интересно так и должно быть. Что за класс offcanvas-clone
Он рассчитывает, необходимо ли off canvas отключить для этой ширины области экрана при его изменении или нет.
Если Вам этого не надо, то можете добавить атрибут data-recalc со значением false к меню:
на эту
Изменить шрифт меню:
1. Подключаем шрифт в разделе head с помощью link или каким-то другим способом:
2. Указываем шрифт меню с помощью CSS:
Сделать пункты меню в виде nav-pills nav-stacked:
Все делаю с телефона и не выходит у меня все верно сделать
Заранее спасибо
Моя почта
o-5@mail.ru
itchief.ru/examples/lab.php?topic=bootstrap&file=b3-navbar-jansy-slide
Если меню шири и выше чем размер экрана, то появляются полосы прокрутки как от фрейма.
Как это можно исправить?
Например:
1) как сделать чтоб не пропадал скролинг, при выдвижном меню и при скроллинге меню пряталось.
2) в моб версии, делая вертикальное движение по сенсору влево при открытом меню, страница «уезжает» влево при этом меню остается отрытым. Можно ли как то зафиксировать это положение?
Такие вопросы лучше конечно писать разработчику этого компонента.
Прямо сейчас не обещаю, но немного попозже посмотрю, как это можно доделать.
Выпадающие подпункты из пункта 4 на мобильных устройствах не кликабельны. Как поправить?
На текущий момент можно воспользоваться следующим решением:
Пример поправил :)
точка не нужна перед dropdown-backdrop? Это не класс?
.dropdown-backdrop — это, конечно же, класс, он добавляется при открытии dropdown меню на мобильных устройствах. Был введён для правильной поддержки устройств на базе iOS.
hidden-md и hidden-lg все равно пропадает…
Наиболее простое решение использовать 2 вида меню:
1 меню — для устройств с большим экраном, которое с помощью классов hidden-xs и hidden-sm скрывать на устройствах с небольшим экраном.
2 меню — для устройств с небольшим экраном, которое с помощью классов hidden-md и hidden-lg скрывать на устройствах с большим экраном.
Например:
Тут ещё конечно надо проверить, что со стилями, чтобы они не переопределились там, где не надо.
вместо
и работает как вы хотите. Можно еще больше задать ширину экрана. чтобы наверняка
Например так:
У автора расширения есть ещё пример с off canvas navbar:
Демо на сайте автора
Но он не работает! Автор немного забросил это расширение и прекратил своевременно обновлять поддержку новых версий bootstrap. Это настораживает.
Рабочий пример (из коммита на гитхабе): через htmlpreview.github.io
И у меня вопрос к автору поста. Я открыл исходный код ваших примеров в браузере и мое внимание привлекли вот эти строки:
Зачем условные комментарии HTML-escaped? Это какой-то специальный хак?
Лично я пишу вот так:
Спасибо за информацию, это не какой не хак, это так парсер обработал.
Демки поправил.
Пытался найти инфу в гугле ничего не нашел, но возможно я неправильно ставил вопрос.